<template>
  <div class="container">
    <el-button @click="handleAdd('_', '_', 'addmin')">添加主部门</el-button>
    <el-table
      height="true"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="name"
        label="部门管理"
        >
      </el-table-column>
      <el-table-column
        prop="id"
        label="id"
        >
      </el-table-column>
      <el-table-column
        prop="parent_id"
        label="parent_id"
        >
      </el-table-column>
      <el-table-column
        prop="remark"
        label="部门介绍"
        >
      </el-table-column>
      <el-table-column label="操作" width="220px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleAdd(scope.$index, scope.row, 'add')">添加</el-button>
          <el-button
            size="mini"
            @click="handleAdd(scope.$index, scope.row, 'edit')">修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :append-to-body="true"
      :title="type === 'edit' ? '修改部门' : type === 'add' ? '新增部门' : '添加主部门'"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item style="width: 300px" label="部门名称" prop="name">
            <el-input class="input" size="small" type="input" v-model="ruleForm.name"></el-input>
          </el-form-item>

          <el-form-item style="width: 300px" label="介绍" prop="">
            <el-input class="input" size="small" type="input" v-model="ruleForm.remark"></el-input>
          </el-form-item>
          <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
          </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addOrgApi, delOrgApi, delRoleApi, editOrgApi, orgListApi } from '../../../apis/userApi'
  export default {
    data(){
      return {
        tableData: [],
        type:'add',
        dialogVisible:false, // 控制窗口打开与显示,
        ruleForm:{
          "name": "",
          "parent_id": "",
          "seq": 1,
          "icon": "/path/icon.png",
          "remark": ""
        },
        // 表单验证
        rules: {
          id:[
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          name:[
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          path:[
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ]
        },
      }
    },

    created(){
      this.getOrgList()
    },
    
    methods: {
      getOrgList(){
        orgListApi().then(res => {
          function loop(_list, _id = null) {
            // 父亲节点
            let _nodes = _list.filter(_it => {
              if(_it.parent_id === ''){
                  _it.parent_id = null
              }
                return _it.parent_id === _id

            })
            // 查找子节点
            return _nodes.map(_item => {
              let _idx = _list.findIndex(_it => _it.parent_id === _item.id)
              if (_idx > -1) {
                  _item.children = loop(_list, _item.id)
              } else {
                  _item.children = []
              }
              return _item
            })
          }
          let _list = loop(res.data.rows)
          this.tableData = (_list)
        })
      },

      handleAdd(index, row, type) {
        console.log(index, row, type);
        this.type = type

        if(type === 'edit'){
          console.log(row);
          this.ruleForm.name = row.name
          this.ruleForm.id = row.id
          this.ruleForm.parent_id = row.parent_id
          this.ruleForm.remark = row.remark
        }else if(type === 'add'){
          this.ruleForm.parent_id = row.id
        }
        this.dialogVisible = true
      },

      handleDelete(index, row) {
        console.log(row);
        delOrgApi(row.id).then(res => {
          if(res.code === 200){
            this.$message.success('删除成功')
            this.getOrgList()
          }else{
            this.$message.error(res.message)
          }
        })
      },

      // 提交
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.type === 'edit'){
              editOrgApi(this.ruleForm).then(res => {
                if(res.code === 200){
                  this.$message.success('修改部门成功')
                  this.getOrgList()
                  this.ruleForm = {
                    "name": "",
                    "parent_id": "",
                    "seq": 1,
                    "icon": "/path/icon.png",
                    "remark": ""
                  },
                  this.dialogVisible = false
                }
              })
            }else if(this.type === 'add'){
              addOrgApi(this.ruleForm).then(res => {
                if(res.code === 200){
                  this.$message.success('添加部门成功')
                  this.getOrgList()
                  this.ruleForm = {
                    "name": "",
                    "parent_id": "",
                    "seq": 1,
                    "icon": "/path/icon.png",
                    "remark": ""
                  },
                  this.dialogVisible = false
                }
              })
            }else{
              // 添加主菜单
              console.log(this.ruleForm);
              addOrgApi(this.ruleForm).then(res => {
                if(res.code === 200){
                  this.$message.success('添加主部门成功')
                  this.getOrgList()
                  this.ruleForm = {
                    "name": "",
                    "parent_id": "",
                    "seq": 1,
                    "icon": "/path/icon.png",
                    "remark": ""
                  },
                  this.dialogVisible = false
                }
              })
            }
            
          } else {
            console.log('取消提交');
            return false;
          }
        });
      },

      // 关闭对话框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.$refs['ruleForm'].clearValidate()
            // this.ruleForm = {
            //   "id": "",
            //   "seq": '',
            //   "parent_id": "",
            //   "name": "",
            //   "icon": "&#xe73f;",
            //   "path": "",
            //   "rights": "",
            //   "path_right": '',
            //   "show": 1,
            //   "remark": ""
            // },
            done();
          })
          .catch(_ => {});
      },
    },
  }
</script>

<style lang="less" scoped>
  .container{
    padding: 16px;
    height: calc(100% - 47px - 32px);
    .el-table{
      width: calc(100% - 32px);
      height: calc(100% - 32px - 40px);
    }
  }
</style>